<template>
	<view class="videoVue">
		<video id="videoId" :src="videoUrl" autoplay controls object-fit="contain">
			<cover-image class="quit absolute" src="/static/quit.png" @click="quit()"></cover-image>
		</video>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				videoContext: null,
				videoUrl: ""
			}
		},
		methods: {
			videoPlay(videoUrl){
				if(this.videoContext) this.videoContext = null
				this.videoUrl = videoUrl
				this.videoContext = uni.createVideoContext('videoId', this)
				this.videoContext.src = videoUrl
				this.videoContext.play()
			},
			quit(){
				this.videoContext.pause()
				this.videoContext = null
				this.$emit("quit")
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .uni-video-fullscreen {
		display: none;
	}
	/deep/ .uni-video-duration {
		padding-right: 60rpx;
	}
	.videoVue {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background: #000;
		z-index: 9999999;
		video {
			width: 100vw;
			height: 100vh;
		}
		.quit {
			width: 40rpx;
			height: 40rpx;
			right: 30rpx;
			bottom: 24rpx;
		}
	}
</style>